<template>
  <div class="approval">
    <!-- 顶部区域 -->
    <div class="top-part">
      <img src="@/assets/images/bg.png" class="bg" />
      <div class="one ml-30" @click="applyTap">
        <img src="@/assets/images/approval/faqi.png" class="middle-bg" />
        <span class="t1">我发起的</span>
      </div>
      <div class="one mr-30" @click="approvalTap">
        <img src="@/assets/images/approval/shenpi.png" class="middle-bg" />
        <span class="t1">我审批的</span>
      </div>
    </div>

    <!-- 申请列表 -->
    <div class="apply-container">
      <span class="tit">发起申请</span>
      <div class="part">
        <div 
          v-if="hasRole('187')" 
          @click="goLink('purchase')"
        >
          <img src="@/assets/images/approval/jinhuo.png" />
          <span>进货申请</span>
        </div>
        <div 
          v-if="hasRole('251')"
          @click="goLink('goodsRequisition')"
        >
          <img src="@/assets/images/approval/wupin.png" />
          <span>物品申请</span>
        </div>
        <div 
          v-if="hasRole('252')"
          @click="goLink('carManagement/carApplyOne')"
        >
          <img src="@/assets/images/approval/ycsq.png" />
          <span>用车申请</span>
        </div>
      </div>
      <div class="part">
        <div 
          v-if="hasRole('120')"
          @click="goLink('carManagement/carMaintenanceApply')"
        >
          <img src="@/assets/images/approval/baoyang.png" />
          <span>车辆维保</span>
        </div>
        <div 
          v-if="hasRole('120')"
          @click="goLink('driverManagement/driverLeaveApply')"
        >
          <img src="@/assets/images/approval/qignjia.png" />
          <span>司机请假</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Approval',
  
  data() {
    return {
      height: '',
      isLoading: true,
      roles: []
    }
  },

  created() {
    this.initData()
  },

  methods: {
    hasRole(role) {
      return this.roles.includes(role)
    },

    initData() {
      // 获取窗口高度
      this.height = `${window.innerHeight - 90}px`
      
      // 获取用户角色
      const userRoles = JSON.parse(localStorage.getItem('user')).roles
      this.roles = userRoles ? userRoles.split(',') : []
    },

    goLink(url) {
      this.$router.push(`/${url}`)
    },

    applyTap() {
      this.$router.push('/myApply')
    },

    approvalTap() {
      this.$router.push('/myApproval')
    }
  }
}
</script>

<style lang="scss" scoped>
.approval {
  background-color: #f5f5f5;
  min-height: 100vh;

  .top-part {
    width: 100%;
    height: 166.5px;
    padding-top: 4%;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .bg {
      position: absolute;
      width: 100%;
      height: 166.5px;
      top: 0;
      left: 0;
    }

    .one {
      width: 167px;
      height: 80.5px;
      z-index: 1;
      position: relative;
      color: #333;
    }

    .ml-30 {
      margin-left: 15px;
    }

    .mr-30 {
      margin-right: 15px;
    }

    .t1 {
      position: absolute;
      z-index: 2;
      color: #fff;
      font-size: 16px;
      top: 36%;
      right: 15%;
      font-weight: bold;
    }

    .middle-bg {
      width: 100%;
      height: 100%;
      // position: absolute;
      z-index: 2;
    }
  }

  .apply-container {
    padding: 12.5px;
    background: #fff;
    margin-bottom: 12.5px;
    margin-top: -12%;

    .tit {
      font-size: 16px;
      font-weight: bold;
      display: block;
      margin-bottom: 25px;
    }

    .part {
      display: flex;
      align-items: center;
      margin-bottom: 25px;

      &:last-child {
        margin-bottom: 0;
      }

      > div {
        width: 33.33%;
        text-align: center;

        img {
          width: 43px;
          height: 43px;
          display: block;
          margin: 0 auto 7.5px;
        }

        span {
          display: block;
          text-align: center;
          font-size: 14px;
        }
      }
    }
  }
}
</style>